<template>
  <div>
    <el-dialog
      :title="cateInfo.isAdd ? '添加商品分类' : '修改商品分类'"
      :visible.sync="cateInfo.isShow"
      center
      :before-close="cancel"
    >
      <el-form :model="cateForm" ref="cateForm" :rules="rules">
        <el-form-item label="上级分类" :label-width="formLabelWidth" prop="pid">
          <el-select v-model="cateForm.pid" placeholder="请选择">
            <el-option :value="0" label="顶级分类">顶级分类</el-option>
            <el-option
              v-for="item in $store.getters['cate/getCate']"
              :key="item.id"
              :label="item.catename"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="分类名称"
          :label-width="formLabelWidth"
          prop="catename"
        >
          <el-input v-model="cateForm.catename" autocomplete="off"></el-input>
        </el-form-item>
        <!-- 分类图片上传 -->
        <!-- 
          on-change	文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用	function(file, fileList)
          file-list	上传的文件列表, 例如: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}]	array
          auto-upload	是否在选取文件后立即进行上传	boolean
          limit	最大允许上传个数	number	—	—
         on-exceed	文件超出个数限制时的钩子	function(files, fileList)
          on-preview	点击文件列表中已上传的文件时的钩子	function(file)
          on-remove	文件列表移除文件时的钩子	function(file, fileList)
           -->
        <el-form-item label="图片" :label-width="formLabelWidth" prop="img">
          <el-upload
            action="#"
            list-type="picture-card"
            :auto-upload="false"
            :file-list="fileList"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :on-change="onChange"
            :on-exceed="handleExceed"
            :limit="1"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-switch
            v-model="cateForm.status"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="1"
            :inactive-value="2"
          >
          </el-switch>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { cateadd, cateedit, cateinfo } from "../../require/api";
import { mapGetters, mapActions } from "vuex";
export default {
  data() {
    return {
      cateForm: {
        // id: "",
        pid: 0, //上级分类编号
        catename: "", //商品分类名称
        img: "", //图片(文件，一般用于二级分类)
        status: 1, //状态1正常2禁用
      },
      //规则验证
      rules: {
        pid: [{ required: true, message: "请输入分类名称", trigger: "blur" }],
        catename: [
          { required: true, message: "请选择上级分类", trigger: "blur" },
          { min: 2, max: 7, message: "长度在 2 到 7 个字符", trigger: "blur" },
        ],
      },
      formLabelWidth: "120px",
      dialogImageUrl: "",
      dialogVisible: false,
      // 上传图片文件列表
      fileList: [],
    };
  },
  props: ["cateInfo"],
  computed: {
    ...mapGetters({ cateList: "cate/getCate" }),
  },
  mounted() {
    //优化
    if (this.$store.getters["menu/getMenu"].length == 0) {
      this.$store.dispatch("menu/getMenuAction");
    }
  },
  methods: {
    ...mapActions({ getCateAction: "cate/getCateAction" }),

    //上传文件个数限制
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },

    //文件列表移除文件时的钩子
    handleRemove(file, fileList) {
      console.log(file, "文件");
      console.log(fileList, "文件列表");
    },
    // 点击文件列表中已上传的文件时的钩子
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    // 图片上传变化
    onChange(file, fileList) {
      console.log(file, "文件");
      console.log(fileList, "文件列表");
      //给img 赋值
      this.cateForm.img = file.raw;
      // console.log( this.cateForm.img );
    },

    // 清空信息和验证
    reset() {
      // 内容重置
      this.cateForm = {
        //
        pid: "",
        catename: "",
        status: 1,
        img: "",
      };
      //   验证清空
      this.$refs.cateForm.resetFields();
      //清空上传图片文件
      this.fileList = [];
    },

    // 取消
    cancel() {
      // 清空
      this.reset();
      //   关闭弹窗
      this.$emit("cancel", false);
    },
    // 数据回溯
    lookup(id) {
      console.log(id, "-----------");
      // 请求一条数据
      cateinfo({ id }).then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.cateForm = res.list;
          this.cateForm.id = id;
          // 图片路径拼接处理
          this.fileList = this.cateForm.img
            ? [{ url: "http://localhost:3000" + this.cateForm.img }]
            : [];
        }
      });
      //"Unknown column 'children' in 'field list'", 需要清空字列表内容，才能对顶级目录修改
      // delete e.children;
      // this.cateForm = { ...e };
    },
    // 确认
    confirm() {
      // 判断是添加还是修改
      this.$refs.cateForm.validate((valid) => {
        if (valid) {
          // console.log(this.cateInfo);
          // 添加
          if (this.cateInfo.isAdd) {
            // console.log(this.cateForm, "cateForm");
            // 请求接口;
            cateadd(this.cateForm).then((res) => {
              // console.log(res);
              if (res.code == 200) {
                // 成功提示
                this.$message.success(res.msg);
                // 关闭弹窗 清除内容
                this.cancel();
                //更新页面
                this.$store.dispatch("cate/getCateAction");
              } else {
                // 失败提示
                this.$message.error(res.msg);
              }
            });
          } else {
            //修改
            console.log("修改丫啊丫丫丫", this.cateForm);
            cateedit(this.cateForm).then((res) => {
              console.log(res);
              if (res.code == 200) {
                // 成功提示
                this.$message.success(res.msg);
                // 关闭弹窗 清除内容
                this.cancel();
                //更新页面
                this.$store.dispatch("cate/getCateAction");
              } else {
                // 失败提示
                this.$message.error(res.msg);
              }
            });
          }
        }
      });
    },
  },
};
</script>
<style lang=less scoped >
</style>
